<template>
  <div class="shopinfo">
    <div class="shoptop">
      <img :src="shop.logo" alt="" />
      <span class="title">
        {{ shop.name }}
      </span>
    </div>
    <div class="shopmiddle">
      <div class="shopmiddleitem shopmiddleitemleft">
        <div class="infosells">
          <div class="sellscount">
            {{ shop.sells }}
          </div>
          <div class="sellstext">总销量</div>
        </div>
        <div class="infogoods">
          <div class="goodscount">
            {{ shop.goodsCount }}
          </div>
          <div class="goodstext">全部宝贝</div>
        </div>
      </div>
      <div class="shopmiddleitem shopmiddleright">
        <table>
          <tr v-for="(item, index) in shop.score" :key="index" class="tr">
            <td>{{ item.name }}</td>
            <td class="score" :class="{ scorebetter: item.isBetter }">
              {{ item.score }}
            </td>
            <td class="better" :class="{ bettermore: item.isBetter }">
              <span>
                {{ item.isBetter ? "高" : "低" }}
              </span>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="shopbottom">
      <div class="entershop">进店逛逛</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shop: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>
<style scoped>
.shopinfo {
  border-top: 1px solid rgb(202, 200, 200);
  margin-top: 30px;
}
.shoptop {
  display: flex;
  align-items: center;
  /* margin-left: 10px; */
  margin: 20px 10px;
}
.shoptop img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid gray;
  vertical-align: center;
  margin-right: 10px;
}
.shopmiddleitemleft {
  display: flex;
  margin: 20px;
  border-right: 1px solid gray;
  text-align: center;
}
.infosells {
  margin-right: 20px;
  text-align: center;
}
.sellscount,
.goodscount {
  font-size: 20px;
}
.infogoods {
  text-align: center;
  padding-right: 30px;
}
.shopmiddle {
  display: flex;
  justify-content: space-around;
}
/* .shopmiddleright table tr {
  padding: 20px;
}
td {
  margin-right: 10px;
} */
table {
  height: fit-content;
  width: fit-content;
}
.tr {
  margin-bottom: 10px;
}
td {
  padding: 3px;
}
.better {
  color: white;
  background-color: green;
}
.bettermore {
  background-color: red;
}

.score {
  color: green;
}
.scorebetter {
  color: red;
}
.shopbottom{
    margin: 10px auto;
}
.entershop{
    text-align: center;
    width: 50%;
    margin: 10px auto;
    border: 1px solid gray;
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
     background-color: rgb(238, 237, 237);
}
</style>
